var _request = require('./request.js');
let Btgame = {
	haveBack: false,
	isFirstNoNum: false,
	init: function () {
		// this.bindEvent();
		_request.getGoodsList((data)=>{
			$('#remainSpan').html(data.data.remain);
		});
		this.setConfig();
		this.pageLoad();
	},
	createGooodList (goodList) {
		let goodItemStr = '';
		goodItemStr = goodList.map((item)=> {
			return `<div class="swiper-slide goodItem">
												<div class="topImgBox"><img src="${item.iconUrl}" alt=""></div>
												<p class="goodItemP">${item.title}</p>
										 </div>`;
		});
		$('.swiper-wrapper').css('width', goodItemStr.length * 2 + 'rem');
		$('.swiper-wrapper').html(goodItemStr);
	},
	setConfig () {
		console.log(window.gameJson)
		let gameJson = window.gameJson.lottery,
				gameTheme = gameJson.sceneConfig,
				goodsList = gameJson.lotteryRewardVOs;
		$("title").html(gameJson.title);
		$('#startBtn').attr('data-src', gameTheme.startBtn);
	},
	pageLoad () {
		let _this = this;
		// window.onload = function() {
			_this.changeConfig();
		// }
	},
	changeConfig () {
		let _this = this;
		$('#startBtn').css({
			"background-image": "url("+$('#startBtn').attr('data-src')+")",
			"display": "block"
		});
		$('#startBtn').on('click', ()=> {
			_this.hideDom('#startBtn');
			_this.hideDom('#remainNum');
			_this.showDom('#loading');
			_request.getGood((data)=> {
				if(data.success) {
					$('.goodDesprect').text(data.data.lottery.rewardPicDescription);
					$('.goodImg').attr('src',data.data.lottery.rewardPicUrl);
					$('.good-get-btn').text(data.data.lottery.buttonText);
					$('#mask_img_bg>img').attr('src', data.data.lottery.rewardPicUrl);
					$('#mask_img_bg>p').html(data.data.lottery.rewardPicDescription);
					// _this.showDom('#mask_img_bg');
					// 初始化canvas
					_this.initCanvas(data.data.lottery.rewardPicUrl);
					$('#remainSpan').html(data.data.remainCount);
					_this.hideDom('#postImg');
					_this.hideDom('#loading');
				}else {
					if(data.code === 1103) {
						_this.showNoNumLayer();
					}
				}
				$('.good-get-btn').one('click', function(){
					 _request.doSummary();
					 _this.jumpToPage(data);
				});
			});
		});
	},
	showDom (obj) {
		$(obj).css('display', 'block');
	},
	hideDom (obj) {
		$(obj).css('display', 'none');
	},
	bindEvent (obj) {
		// $()
	},
	initCanvas (imgUrl) {
		let gameConfig = window.gameJson.lottery.sceneConfig;
		let _this = this,
		   footSize = window.FootfontSize,
		   imgsrc = $('#demoImg').attr('src'),
			 imgSrcTwo =  $('#demoImgTwo').attr('src'),
		   scratch = new Scratch({
            canvasId: 'js-scratch-canvas',
            imageBackground: imgUrl,
            // pictureOver: imgsrc,
            pictureOver: gameConfig.postImg,
            cursor: {
                // png: imgsrc,
                x: '20',
                y: '17'
            },
						width: footSize * 6.43,
						height: footSize * 4.2,
            radius: 20,
            nPoints: 100,
            percent: 20,
            callback: function () {
								if(!_this.haveBack) {
									_this.showOutLayer();
									_this.haveBack = true;
								}
            },
            // pointSize: { x: 3, y: 3}
    });
	},
	showNoNumLayer () {
		let _this = this;
		_request.getMoreGame(function(data){
			console.log(data.data);
			if(data.success) {
				_this.hideDom('#loading');
				_this.creatMoreGameList(data.data);
				_this.showDom('.moreGameMast');
				$('.moreGameCloseBtn').on('click', function(){
					_this.closeLayer('.moreGameMast');
				});
			}else {
				_this.hideDom('#loading');
				_this.showDom('.noNumOutBox');
				$('.noNumOutLayer>img').attr('src', $('.noNumOutLayer>img').attr('data-src'));
				$('.noNumOutLayer').on('click', function(){
					_this.closeLayer('.noNumOutBox');
				});
			}
		});
		_this.isFirstNoNum = true;
	},
	creatMoreGameList (dataArr) {
		let itemStr = '';
		itemStr = dataArr.map((item)=>{
			if(!item.bannerUrl) {
				item.bannerUrl = '//static.adbaitai.com/game/Theme/Real/Guaguale/Img/morenBanner.png';
			}
				return `<div class="moreGameItem">
									<a href="${item.jumpUrl}" class="moreGameItemTop">
										<img src="${item.bannerUrl}" alt="">
										<span class="moreGameItemDetail">${item.title}</span>
										<span class='moreGameItemBtn'></span>
									</a>
								</div>`;
		});
		console.log(itemStr);
		$('.moreGameList').html(itemStr);
	},
	showOutLayer () {
		// setTimeout(function(){
			$("#outLayerOne").css({
				"display":"block"
			});
			$('.centerBox').css({
				  "opacity": 1
			})
		// }, 500);
		$('#closeBtn').on('click', ()=> {
			Btgame.closeLayer('#outLayerOne');
		});
	},
	jumpToPage (data) {
		this.closeLayer('#outLayerOne');
		window.location.href = data.data.lottery.skipUrl;
	},
	closeLayer (obj) {
		if($('#remainSpan').html() === '0' && !this.isFirstNoNum) {
			this.showNoNumLayer();
		}
		this.haveBack = false;
		Btgame.showDom('#startBtn');
		Btgame.showDom('#remainNum');
		Btgame.showDom('#postImg');
		if(obj) $(obj).css('display', 'none');
	}
};

Btgame.init();
module.exports = Btgame;
